<template>
    <div class="loginPage">
        <div class="left">
            <img class="leftPictrue" src="../assets/login-page.jpg" alt="ST Parking System" />
        </div>
        <div class="right">
            <img class="green-logo" src="../assets/green-logo.png" alt="ST Parking System" />

            <div class="bottomBox">
                <el-input v-model="inputAccount" placeholder="Account" class="loginBtn"></el-input>
                <el-input v-model="inputPsw" placeholder="password" class="loginBtn" show-password></el-input>
                <el-button class="loginBtn" @click="loginHandle()">Login</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive, toRefs, onMounted, getCurrentInstance } from "vue";
import { useRouter } from 'vue-router'
import { useStore } from 'vuex' // 引入useStore 方法
export default {
    setup() {
        const { proxy } = getCurrentInstance();
        const rq = proxy.$instance;
        const router = useRouter()
        const store = useStore() 

        onMounted(() => {
            console.log('====================================');
            console.log(store);
            console.log('====================================');

        });


        function loginHandle() {
            rq.post("/api/authenticate", {
                username: state.inputAccount,
                password: state.inputPsw,
            }).then(res => {

                localStorage.setItem("token", `Bearer ${res.data.id_token}`)
                // 请求account
                if (res.data.id_token) {
                    rq.get("/api/account", {
                   
                }).then(res => {
                   
                    console.log(res);
                    localStorage.setItem("loginRole", res.data.authorities[0])
                })
                    router.push("home");
                    // 存token
                    // rq.$store.dispatch("changeAsync", res.headers.authorization);
                }
            })
        }

        const state = reactive({
            count: 0,
            inputAccount: "admin",
            inputPsw: "201810",
        });

        return {
            ...toRefs(state),
            loginHandle,
        };
    },
};
</script>

<style lang="scss" scoped>
@import "@/publicAndBaseCss/public.scss";

.loginPage {
    display: flex;

    .left {
        width: 80%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;

        .leftPictrue {
            width: 50%;
        }
    }

    .right {
        width: 50%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;

        .green-logo {
            width: 50%;
        }

        .grid-content {
            background-color: $main-color;
        }

        .bottomBox {
            height: 20vh;
            display: flex !important;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center !important;
        }

        .loginBtn {
            width: 25.6vw;
            background-color: $main-color;
            color: $main-whitecolor;
        }
    }
}
</style>
